<template>
  <div>
    <!--  轮播图开始-->
    <div>
      <el-carousel>
        <el-carousel-item v-for="item in data.imgs" :key="item">
          <img
            class="carousel-image"
            style="width: 100%; height: 500px"
            :src="item"
            alt=""
          />
        </el-carousel-item>
      </el-carousel>
    </div>
    <!--  轮播图结束-->

    <!--  下面部分开始-->
    <div style="display: flex">
      <!--左侧导航菜单开始-->
      <div class="sidebar">
        <el-menu
          router
          :default-active="router.currentRoute.value.path"
          style="border: 0"
        >
          <el-menu-item index="/bmanager/index/products">
            <el-icon>
              <Goods />
            </el-icon>
            {{ $t("index.Productlist") }}
          </el-menu-item>
          <el-menu-item index="/bmanager/index/ShoppingCart">
            <el-icon>
              <ShoppingCartFull />
            </el-icon>
            {{ $t("index.Shoppingcart") }}
          </el-menu-item>
          <el-menu-item index="/bmanager/index/Collection">
            <el-icon>
              <Collection />
            </el-icon>
            {{ $t("index.Collection") }}
          </el-menu-item>
          <el-menu-item index="/bmanager/index/myorder">
            <el-icon>
              <Document />
            </el-icon>
            {{ $t("index.MyOrder") }}
          </el-menu-item>
          <el-menu-item index="/bmanager/index/userorders">
            <el-icon><Avatar /></el-icon>
            {{ $t("index.MyOrder") }}
          </el-menu-item>
        </el-menu>
      </div>
      <!--左侧导航菜单结束-->

      <!--右侧主体区域开始-->
      <div style="flex: 1; width: 0; background-color: #f2f4f8">
        <RouterView />
      </div>
      <!--右侧主体区域结束-->
    </div>
    <!--  下面部分结束-->
  </div>
</template>

<script setup>
import { reactive } from "vue";
import lun1 from "@/assets/img/lun1.jpg";
import lun2 from "@/assets/img/lun2.jpg";
import lun3 from "@/assets/img/lun3.jpg";
import lun4 from "@/assets/img/lun4.jpg";
import lun5 from "@/assets/img/lun5.jpg";
import lun6 from "@/assets/img/lun6.jpg";
import router from "@/router/index.js";
import { House, Search } from "@element-plus/icons-vue";

const data = reactive({
  imgs: [lun1, lun2, lun3, lun4, lun5, lun6],
});
</script>

<style scoped>
.sidebar {
  /*position: fixed;*/
  width: 200px;
  border-right: 1px solid #ddd;
  min-height: calc(
    100vh - 560px
  ); /* 根据轮播图高度调整，这里假设轮播图高度是560px */
}
.carousel-image {
  width: 100%;
  height: 500px;
  object-fit: cover; /* 使图片保持纵横比，并覆盖整个容器 */
}

.el-menu .is-active {
  background-color: #eef4ff !important;
}

.el-menu--horizontal > .el-menu-item:nth-child(1) {
  margin-right: auto;
}
</style>
